<template>
	<view class="main">
		<custom @showTopDailog="showTopDailog" @getContent="getContent" position="index"
			@getPlanListEvent="getPlanListEvent"></custom>
		<view class="main_containers" v-if="isrefresh">
			<pageTitle name="艺人介绍" :navBarArr="navBarArr"></pageTitle>
			<view class="artistsContainers" >
				<view class="artistsContainers_item" v-for="(items, indexs) in PlanList" :key="indexs" v-if="items.actorVoList&&items.actorVoList.length>0">
				   <view class="artistsContainers_item_topRot">
					   <view class="artistsContainers_item_top" :style="{color:colorArr[indexs%3],borderColor:colorArr[indexs%3]}">
					   	<!-- <image class="artistsContainers_item_top_img" referrerpolicy="no-referrer"
					   		:src="items.dayimg" /> -->
					   		DAY{{indexs+1}}
					   </view>
				   </view>
					
					<view class="artistsContainers_item_info display_flex-center">
						<view class="artistsContainers_item_info_title" :style="{color:colorArr[indexs%3]}">
							{{items.day}}
						</view>
						<view class="artistsContainers_item_info_dec">
							ARTISTS
						</view>
					</view>
					<view class="artistsContainers_item_peopleList">
						<view class="artistsContainers_item_peopleList_item" v-for="(item, index) in items.actorVoList" :key="index" @tap="goPeopleDetail(item,items.day,indexs+1)">
							<lazy-image class="artistsContainers_item_peopleList_item_img" radius="2rpx"  :realSrc="item.headImgurl" mode="scaleToFill"></lazy-image> 
							<!-- <image class="artistsContainers_item_peopleList_item_img" referrerpolicy="no-referrer"
								:src="item.img" /> -->
							<view class="artistsContainers_item_peopleList_item_name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import topDailog from '@/components/common/topDailog.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import footerContainer from '@/components/common/footer.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			pageTitle,

		},
		data() {
			return {
				isrefresh:false,
				PlanList:[],
				topDailogStatus: false,
				navBarArr: [{
						id: '1',
						name: "首页"
					},
					{
						id: '2',
						name: "演员"
					}
				],
				colorArr:[
					'rgba(53, 112, 65, 1)',
					'rgba(27, 28, 128, 1)',
					'rgba(234, 11, 42, 1)',
					
				],
				
			}
		},
		onShow() {

		},
		onLoad(options) {
			let _this = this

		},
		onReady() {



		},
		methods: {
			getPlanListEvent(data) {
				this.PlanList = data
			},
			getContent(data) {
				console.log('演常')
				console.log(data)
				let that = this
			
				this.isrefresh = false
				// 设置一个1000毫秒后执行的定时器
				setTimeout(function() {
					that.isrefresh = true
				}, 1000);
			
			},
			showTopDailog() {
				this.topDailogStatus = true
			},
			goPeopleDetail(item,day,index){
				uni.navigateTo({
					url: '/pages/artists/detail?actorId='+item.id+'&day='+day+'&index='+index
				});
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
		background-image: url("../../static/bg_middle.png");
		background-size: 100% 100%;
		.artistsContainers{
			&_item{
				&_topRot{
					transform: rotate(-10deg);
				}
				&_top{
					text-align: center;
					 width:100rpx;
					height:48rpx;
					display: block;
					font-size:28rpx;
					font-weight:700;
					line-height: 44rpx;
					margin:20rpx auto;
					border: 2px solid #fff;
					border-radius: 2px;
					transform: skew(-30deg);
					&_img{
						width:100%;
						height:100%;
					}
				}
				&_info{
					&_title{
						font-size:64rpx;
						line-height: 75rpx;
						height:75rpx;
						font-weight: 700;
					}
						
					&_dec{
						margin-left:16rpx;
						font-size:40rpx;
						height:48rpx;
						line-height: 48rpx;
						font-weight: 700;
						
					}
				}
				&_peopleList{
					display: flex;
					flex-wrap: wrap;
					padding:28rpx 32rpx;
					&_item{
						width:332rpx;
						margin-right:22rpx;
						margin-top:40rpx;
						&_img{
							width:332rpx;
							height:332rpx;
						}
						&_name{
							font-size:28rpx;
							line-height: 40rpx;
							font-weight:700;
							text-align: center;
							margin-top:10rpx;
						}
					}
					&_item:nth-child(2n){
						margin-right:0rpx;
					}
				}
			}
		}
	}
</style>